<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="main_layout::html_header(~{::link}, ~{::style})">
	<link rel="stylesheet" th:href="@{/lib/DataTables/1.10.15/datatables.min.css}" />
	<link rel="stylesheet" th:href="@{/lib/sweetalert2/6.6.5/sweetalert2.min.css}" />
    <style type="text/css">

    </style>
</head>

 
<body class="hold-transition skin-blue fixed">
<div class="wrapper">

<header class="main-header" th:replace="main_layout::header">
</header>



<aside class="main-sidebar">
	<section class="sidebar" th:replace="main_layout::menu">
	</section>
</aside>

<div class="content-wrapper">
<section class="content-header">
	<h1><a th:href="@{/dashboard}">首页 </a><small>用户列表</small></h1>
</section>
	
<section class="content">
<div class="box box-info">
<div class="box-header">
	<form class="form-inline" id="search_form">
		<div class="form-group">
			<label for="name">姓名：</label>
			<input type="text" class="form-control" name="name" />
		</div>
		<div class="form-group">
			<label for="organizationName">单位名称：</label>
			<input type="text" class="form-control" name="organizationName" />
		</div>
		<div class="form-group">  
			<button type="button" class="btn btn-default" onclick="$('#search_form')[0].reset();">重置</button>
			<button type="button" class="btn btn-primary" onclick="table.ajax.reload();">查询</button>
		</div>
	</form> 
</div>

<div class="box-body">

<table id="table_id" class="table table-hover table-bordered">
    <thead>
    <tr>
    	<th>ID</th>
        <th>姓名</th>
        <th>电话</th>
        <th>电子邮件</th>
        <th>地址</th>
        <th>性别</th>
        <th>生日</th>
        <th>操作</th>
    </tr>
    </thead>
</table>

</div>
</div>
</section>
</div>
  
<footer class="main-footer" th:replace="main_layout::footer">
</footer>

<aside class="control-sidebar control-sidebar-light">
    
</aside>

<div class="control-sidebar-bg" ></div>

</div>

<script th:src="@{/lib/DataTables/1.10.15/datatables.js}"></script>
<script th:src="@{/lib/DataTables/datatables.config.js}"></script>
<script th:src="@{/lib/moment/2.18.1/moment.min.js}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
$(function(){
	$('#table_id').DataTable({
        serverSide: true,
        select: false,
        ajax: {
            url: "[[@{/user/data}]]",
            type: 'POST',
            data: function(d){
				d.query = JSON.stringify($("#search_form").serializeArray());
			}
        },
        columnDefs: [
        	{targets: 0, visible: false},
        	{targets: 6, width: 60, render: function(data, type, full, meta ) {
				return data ? moment(data).format("YYYY-MM-DD") : '';
			}},
			{targets: 5, width: 30, render: function(data, type, full, meta ) {
				return data == 1? '男' : '女';
			}},
        	{targets: 4, orderable: false, render: function(data, type, full, meta ) {
				return data  + full[7] + full[8];
			}},
			{targets: 7, width: 60, orderable: false, data: 0, render: function(data, type, full, meta) {
				return '';
			}}
        ]
    });
});

</script>
</body>
</html>
